<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像组件 -->
      <login-avatar />
      <!-- 表单组件 -->
      <login-form />
    </div>
  </div>
</template>

<script>
import LoginAvatar from './childComps/LoginAvatar.vue'
import LoginForm from './childComps/LoginForm.vue'
export default {
  name: 'Login',
  components: { LoginForm, LoginAvatar },
}
</script>

<style lang="less" scoped>
.login-container {
  background-color: #2b4b6b;
  height: 100%;
}
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 14px;
}
</style>
